<template>
    <div>
        <vue-particles color="#FF6600" :particleOpacity="0.7" :particlesNumber="80" shapeType="circle" :particleSize="4"
            linesColor="#FF6600" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150"
            :moveSpeed="3" :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push" class="lizi" />
        <div class="login">
            <div class="title"><img src="@/assets/images/logo.png" alt="">活动管理系统</div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="账号" prop="name">
                    <el-input type="text" v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pass">
                    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="类型" prop="authType">
                    <el-select v-model="ruleForm.authType" placeholder="请选择权限类型">
                        <el-option label="0-超管" value="0"></el-option>
                        <el-option label="1-普通管理" value="1"></el-option>
                        <el-option label="2-查看管理" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
                    <!-- <el-button @click="login()">返回登录</el-button> -->
                    <el-button @click="$router.push('/login')">返回登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            ruleForm: {
                name: '',
                pass: '',
                authType: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                ],
                pass: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ],
                authType: [
                    { required: true, message: '请输入此用户的权限类型（0-超管，1-普通管理员，2-查看管理员）', trigger: 'change' }
                ]
            }
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$http.post('/user/register', this.ruleForm).then(res => {
                        if (res.data.status == 1) {
                            this.$message.success(res.data.msg)
                        } else {
                            this.$message.error(res.data.msg)
                        }
                    })
                } else {
                    this.$message.error('注册失败！')
                    return false;
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        login() {
            this.$router.push('/login')
        }
    }
}
</script>
<style>
html,
body {
    background: #efefef;
}
.lizi {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.login {
    position: absolute;
    width: 500px;
    left: 50%;
    top: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: translate(-50%, -50%);
    border-radius: 30px;
    padding: 30px;
}
.title {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 50px;
    margin-bottom: 15px;
}
.title img {
    max-width: 100%;
    display: block;
    margin: 0 auto 20px;
}
</style>